<?php

require_once("koneksi.php");

?>
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			<title>Grafik penjualan smartphone </title>
		<!--1) include file jquery.min.js dan higchart.js-->
		<script type="text/javascript" src="highchart/js/jquery.min.js"></script>
		<script src="highchart/js/highcharts.js"></script>

		<script type="text/javascript">
		//2)script untuk membuat grafik, perhatikan setiap komentar agar paham
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container', //letakan grafik di div id container
				//Type grafik, anda bisa ganti menjadi area,bar,column dan bar
                type: 'line',  
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Penjualan smartphone di toko candraphone',
                x: -20 //center
            },
            subtitle: {
                text: 'candra.web.id',
                x: -20
            },
            xAxis: { //X axis menampilkan data bulan
                    
                categories: ['januari', 'febuari', 'maret','april','mei','juni']
            },
            yAxis: {
                title: {  //label yAxis
                    text: 'Total penjualan'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080' //warna dari grafik line
                }]
            },
            tooltip: { 
			//fungsi tooltip, ini opsional, kegunaan dari fungsi ini 
			//akan menampikan data di titik tertentu di grafik saat mouseover
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y ;
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
			//series adalah data yang akan dibuatkan grafiknya,
		
            series: [
                        <?php $query = mysql_query("SELECT * FROM iklan");
                        while( $ret = mysql_fetch_array($query)) 
                        {
                            $id_iklan = $ret['id_iklan'];
                            $jenis = $ret['judul_iklan'];
                                $query2 = mysql_query("SELECT * FROM kunjungandetiliklan WHERE id_iklan = $id_iklan");

                                $data = "";
                                while( $ret_ = mysql_fetch_array($query2))
                                {
                                    $kunjungan = $ret_['kunjungan_iklan'];
                                    $data = $data . "," . $kunjungan;
                                }
                                $data = substr( $data , 1 , strlen( $data ));
                                ?>
                                {
                                    name: '<?php echo $judul_iklan; ?>'
                                    data: [<?php echo $data; ?>]
                                },
                                <?php
                        } 
                        ?>
            
            ]
        });
    });
    
});
		</script>
	</head>
	<body>
<script type="text/javascript" src="highchart/js/jquery.min.js"></script>
<script src="highchart/js/highcharts.js"></script>
<script src="highchart/js/exporting.js"></script>

<!--grafik akan ditampilkan disini -->
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id=link>

<?php echo $data; ?>
<a href='linechart.html'>Grafik Garis</a>|
<a href='areachart.html'>Grafik Area</a>|
<a href='barchart.html'>Grafik Batang</a>|
<a href='kolomchart.html'>Grafik Kolom</a>
</div>
	</body>
</html>